<template>
  <div class="footer-container">
    <footer class="short-2">
      <div class="container">
        <div class="row ui-sortable text-center">
          <div class="contact-menu col-md-12 space-between">
            <span class="pull-left">
              <a href="#">
                <img class="logo"
                  src="https://23kri02j3rke414ynf4dgx2i-wpengine.netdna-ssl.com/img/mobapi-logo-green.png" alt="Logo">
              </a>
            </span>
            <span class="footer-menu pull-right">
              <a>{{t('term')}}</a>
              <a>{{t('legal')}}</a>
              <a>{{t('join')}}</a>
              <a>{{t('contact')}}</a>
            </span>
          </div>
          <a-divider />
          <div class="contact-sub-menu col-md-12">
            <span class="pull-left">© {{nowYear}} {{t('made')}}</span>
            <div>
            <b-skeleton class="pull-right" v-for="img of imgs" :loading="allLoading" width="110px" height="42px">
              <span>
                <img class="logo-sponsors-footer" :src="img.url" alt="">
              </span>
            </b-skeleton>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script lang="ts">
  /** lib **/
  // i18n
  import {
    useI18n
  } from 'vue-i18n'
  /** components **/
  import bSkeleton from '../../../components/bSkeleton.vue'
  /** logic **/
  import useNowYear from './now-year' // now-year
  import useImgLoading from './img-loading' // img-loading
  export default {
    components: {
      bSkeleton
    },
    setup() {
      return {
        ...useNowYear(),
        ...useImgLoading(),
        ...useI18n({
          inheritLocale: true
        })
      }
    }
  }
</script>

<i18n>
  {
  "zh":{
  "term": "服务条款",
  "legal":"法律公告",
  "join":"加入我们",
  "contact":"联系我们",
  "made":"Mobapi-制造♥ 在法属圭亚那"
  },
  "en": {
  "term": "Terms of service",
  "legal":"Legal Notice",
  "join":"Join Us",
  "contact":"Contact Us",
  "made":"Mobapi - Made with ♥ in French Guiana"
  },
  "ja": {
  "term": "利用規約",
  "legal":"ほうてき つうち",
  "join":"加入する",
  "contact":"お問い合わせ",
  "made":"モーピー♥ フランス領ギアナ"
  }
  }
</i18n>

<style scoped>
  .footer-container {
    padding: 50px 0 40px 0;
  }

  /* footer.short-2 .contact-menu {
    padding-top: 20px;
    padding-bottom: 20px;
    line-height: 50px;
} */
  footer.short-2 span {
    display: inline-block;
    margin-right: 0px;
    float: left;
    margin-bottom: 20px;
  }

  .footer-container .logo {
    max-width: 128px;
  }

  .footer-menu a {
    margin-left: 25px;
    text-decoration: none;
    color: black;
  }

  .footer-menu a:hover {
    margin-left: 25px;
    text-decoration: none;
    color: #14CC71;
  }

  footer.short-2 .contact-sub-menu {
    padding-top: 20px;
    color: #888888;
  }
  .space-between{
    justify-content: space-between;
    display: flex;
  }

  .footer-container .logo-sponsors-footer {
    max-width: 70px;
    margin-left: 40px;
  }
</style>